{% extends "base.html" %}

{% set active_page = "Database" %}


{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pagination.css') }}">
<style>
    .comparison-table {
        width: 100%;
        table-layout: fixed;
        white-space: nowrap;
        overflow: hidden;
    }
    .first-col {
        width: 50%;
        overflow: hidden;
    }
    .second-col {
        text-align: right;
        overflow: hidden;
    }
    @media (max-width: 1200px) {
        /* 1200px is the breakpoint for Bootstrap 4 col-xl */
        .first-col {
            width: 100%;
        }
        .second-col {
            display: none;
        }
     }
</style>
{% endblock %}


{% block body %}
<script type="text/javascript" src="{{ url_for('static', filename='js/update_url_variables.js') }}"></script>

<div class="row justify-content-center">
    <div class="mt-4 col-lg-8 col-md-10" style="max-width: 1024px;">
        <h3 class="mb-3">Browse Firmware Comparisons</h3>
    </div>
</div>

<div class="row justify-content-center">
    <div class="mt-4 col-lg-8 col-md-10">
        <div class="card-body p-3 mx-auto" style="max-width: 1024px;">
            <ul class="list-group list-group-flush px-0">
                {% for id, hids, submission_date in compare_list %}
                    <li class="list-group-item bg-light p-2 clickable li-hover" onclick="location.href='/compare/{{ id }}'">
                        <a href="/compare/{{ id }}">
                            <div class="p-1" style="width: 100%; height: 100%; font-size: 14px;">
                                <table class="comparison-table">
                                    {% for uid in hids %}
                                        <tr>
                                            <td class="first-col">
                                                {{ hids[uid] }}
                                            </td>
                                            <td class="second-col">
                                                <span class="footnote">{{ uid }}</span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                                <span class="footnote text-muted">
                                    {{ submission_date | int | nice_unix_time }}
                                </span>
                            </div>
                        </a>
                    </li>
                {% else %}
                    <h4>No comparisons found in database!</h4>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div style="max-width: 300px;">
        {% if pagination is defined %}
            {{ pagination.info }}
            {{ pagination.links }}
        {% endif %}
    </div>
</div>

{% endblock %}
